<template>
    <div id="setup-son">
        <a-table
            :columns="columns"
            :data-source="showData"
            :rowKey="row => row.name"
        >
            <template
                #name="{text, record, index}"
            >
                {{`${index}-${text}-${record.age}-${record.job}-${record.skill}`}}
            </template>
        </a-table>
    </div>
</template>
<script>
/**
 * v-slot:job="{text, record, index}",这里 v-slot:  可以简写为#
 * 这里v-slot 的三个参数不是按照顺序，而是按关键字取值，因此text，record，index不能用其他名字代替而顺序却可以交换
 */
import getAndSetHeros from './getAndSetHeros';
import { toRefs } from 'vue'
export default {
    data() {
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
                slots: { title: 'customTitle', customRender: 'name' },
            },
            {
                title: '年龄',
                dataIndex: 'age',
                slots: {customRender: 'age' },
            },
            {
                title: '职业',
                dataIndex: 'job',
                slots: {customRender: 'job'}
            },
            {
                title: '技能',
                dataIndex: 'skill',
                customRender: ({text, record, index}) => `直接在columns设置的显示`
            }
        ]
        return {
            columns
        }
    },
    props: {
        type: {
            default: 'heros',
            type: String,
        }
    },
    setup(props){
        // 使用 `toRefs` 创建对prop的 `type` property 的响应式引用, 实际是解构赋值
        const { type } = toRefs(props)
        const { heros } = getAndSetHeros(type)
        return {
            showData: heros,
        }
    },
}
</script>
<style lang="scss">
    
</style>
